<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>00关于本系列文章 · ShaofeiZi Blog · 做个日常记录</title>
    <meta name="description" content="訾绍飞的博客。万物皆有裂缝处，那是光射进来的地方。">
    <link rel="shortcut icon" href="/BLOG/favicon.ico">
  <link rel="manifest" href="/BLOG/manifest.json">
  <meta name="theme-color" content="#3F51B5">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="apple-touch-icon" href="/BLOG/icons/192.png">
  <link rel="mask-icon" href="/BLOG/icons/safari-pinned-tab.svg" color="#3eaf7c">
  <meta name="msapplication-TileImage" content="/icons/192.png">
  <meta name="msapplication-TileColor" content="#3F51B5">
    
    <link rel="preload" href="/BLOG/assets/css/42.styles.90045bd1.css" as="style"><link rel="preload" href="/BLOG/assets/js/app.1a725be8.js" as="script"><link rel="preload" href="/BLOG/assets/js/34.9b22334e.js" as="script"><link rel="prefetch" href="/BLOG/assets/js/7.88ba0bb7.js"><link rel="prefetch" href="/BLOG/assets/js/0.d3e592bd.js"><link rel="prefetch" href="/BLOG/assets/js/1.39b9c99c.js"><link rel="prefetch" href="/BLOG/assets/js/2.68dc10c9.js"><link rel="prefetch" href="/BLOG/assets/js/3.dfebdd5e.js"><link rel="prefetch" href="/BLOG/assets/js/4.ea97a821.js"><link rel="prefetch" href="/BLOG/assets/js/5.d8c2ecbf.js"><link rel="prefetch" href="/BLOG/assets/js/6.e51cd79c.js"><link rel="prefetch" href="/BLOG/assets/js/8.d9eebc06.js"><link rel="prefetch" href="/BLOG/assets/js/9.1a541d13.js"><link rel="prefetch" href="/BLOG/assets/js/10.4ec9ca67.js"><link rel="prefetch" href="/BLOG/assets/js/11.02558377.js"><link rel="prefetch" href="/BLOG/assets/js/12.d0e2086f.js"><link rel="prefetch" href="/BLOG/assets/js/13.5af02ddd.js"><link rel="prefetch" href="/BLOG/assets/js/14.5d9fcbf2.js"><link rel="prefetch" href="/BLOG/assets/js/15.ca0178b2.js"><link rel="prefetch" href="/BLOG/assets/js/16.cd99d056.js"><link rel="prefetch" href="/BLOG/assets/js/17.56f11c1d.js"><link rel="prefetch" href="/BLOG/assets/js/18.21837cc7.js"><link rel="prefetch" href="/BLOG/assets/js/19.73335fea.js"><link rel="prefetch" href="/BLOG/assets/js/20.1632ab79.js"><link rel="prefetch" href="/BLOG/assets/js/21.43175244.js"><link rel="prefetch" href="/BLOG/assets/js/22.5b7c0cca.js"><link rel="prefetch" href="/BLOG/assets/js/23.e624ba97.js"><link rel="prefetch" href="/BLOG/assets/js/24.ac5f7b41.js"><link rel="prefetch" href="/BLOG/assets/js/25.6934a11d.js"><link rel="prefetch" href="/BLOG/assets/js/26.407b2583.js"><link rel="prefetch" href="/BLOG/assets/js/27.7449d673.js"><link rel="prefetch" href="/BLOG/assets/js/28.52e25437.js"><link rel="prefetch" href="/BLOG/assets/js/29.fba21f3a.js"><link rel="prefetch" href="/BLOG/assets/js/30.2cd6d3e2.js"><link rel="prefetch" href="/BLOG/assets/js/31.0b0a749f.js"><link rel="prefetch" href="/BLOG/assets/js/32.92134487.js"><link rel="prefetch" href="/BLOG/assets/js/33.ad2b89cc.js"><link rel="prefetch" href="/BLOG/assets/js/35.825f3d75.js"><link rel="prefetch" href="/BLOG/assets/js/36.cc3da84c.js"><link rel="prefetch" href="/BLOG/assets/js/37.8f339f62.js"><link rel="prefetch" href="/BLOG/assets/js/38.5674618f.js"><link rel="prefetch" href="/BLOG/assets/js/39.180f0d85.js"><link rel="prefetch" href="/BLOG/assets/js/40.275f26e3.js"><link rel="prefetch" href="/BLOG/assets/js/41.ce0f5927.js">
    <link rel="stylesheet" href="/BLOG/assets/css/42.styles.90045bd1.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div data-app="true" id="app" class="application theme--light"><div class="application--wrap"><div class="v-progress-linear blog-progress" style="height:3px;display:none;"><div class="v-progress-linear__background accent" style="height:3px;opacity:0.4;width:100%;"></div><div class="v-progress-linear__bar"><!----><div class="v-progress-linear__bar__determinate accent" style="width:0%;"></div></div></div><aside class="v-navigation-drawer v-navigation-drawer--close v-navigation-drawer--fixed v-navigation-drawer--is-mobile" style="height:100%;margin-top:0px;max-height:calc(100% - 0px);transform:translateX(-240px);width:240px;"><div><div class="aside-brand-wrap"><div class="aside-brand"><a href="/BLOG/" class="aside-avatar elevation-2 router-link-active"><img src="/BLOG/face.png" alt="avatar"></a><hgroup class="mt-3 variant-hide"><div class="subheading white--text">訾绍飞</div><a href="mailto:zishaofei221@gmail.com" title="zishaofei221@gmail.com" class="aside-mail primary--text text--lighten-5">zishaofei221@gmail.com</a></hgroup></div></div><hr class="v-divider theme--dark"><div class="v-list nav-list"><div class="secondary--text"><a href="/BLOG/" class="v-list__tile v-list__tile--link"><div class="v-list__tile__avatar"><div class="v-avatar" style="height:40px;width:40px;"><i class="fa fa-home"></i></div></div><div class="v-list__tile__content">首页</div></a></div><div class="secondary--text"><a href="/BLOG/tags" class="v-list__tile v-list__tile--link"><div class="v-list__tile__avatar"><div class="v-avatar" style="height:40px;width:40px;"><i class="fa fa-tag"></i></div></div><div class="v-list__tile__content">标签</div></a></div><div class="secondary--text"><a href="https://github.com/ShaofeiZi" target="_blank" class="v-list__tile v-list__tile--link"><div class="v-list__tile__avatar"><div class="v-avatar" style="height:40px;width:40px;"><i class="fab fa-github"></i></div></div><div class="v-list__tile__content">Github</div></a></div><div class="secondary--text"><a href="/BLOG/about" class="v-list__tile v-list__tile--link"><div class="v-list__tile__avatar"><div class="v-avatar" style="height:40px;width:40px;"><i class="fa fa-user-secret"></i></div></div><div class="v-list__tile__content">About</div></a></div></div></div><div class="v-navigation-drawer__border"></div></aside><nav class="blog-toolbar v-toolbar v-toolbar--fixed theme--dark primary" style="margin-top:0px;padding-right:0px;padding-left:0px;transform:translateY(0px);"><div class="v-toolbar__content" style="height:56px;"><button type="button" class="v-btn v-btn--icon"><div class="v-btn__content"><i class="fa fa-bars"></i></div></button><div class="v-toolbar__title">00关于本系列文章</div><div class="spacer"></div><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><div class="v-menu" style="display:none;"><div class="v-menu__activator"><button type="button" class="v-btn v-btn--icon"><div class="v-btn__content"><i class="fa fa-share-alt"></i></div></button></div><div class="v-menu__content" style="max-height:auto;min-width:0px;max-width:auto;top:12px;left:0px;transform-origin:top right;z-index:0;display:none;"><div class="v-list"><div class="secondary--text"><a class="v-list__tile v-list__tile--link"><div class="v-list__tile__avatar"><div class="v-avatar" style="height:40px;width:40px;"><i class="fa fa-lg fa-copy"></i></div></div><div class="v-list__tile__title">复制链接</div></a></div></div><input type="text" tabindex="-1" aria-hidden="true" value="" class="fake-hide"></div></div></div></nav><main class="v-content" style="padding-top:56px;padding-right:0px;padding-bottom:0px;padding-left:0px;"><div class="v-content__wrap"><div class="container blog-container grid-list-xl align-center"><div class="layout row wrap"><div class="flex mb-3 xs12"><article class="v-card elevation-16 post-card" style="height:undefined;"><div class="v-card__title"><div class="flex xs12"><h2 class="display-1 mb-3">00关于本系列文章</h2><div class="post-meta"><time datetime="2018-04-28T12:15:53.000Z" class="secondary--text post-time">2018年04月28日</time></div></div></div><div class="v-card__text pt-0 pb-0"><div class="flex xs12"><div class="content custom"><h1 id="_30-天精通-rxjs-00-：-关于本系列文章"><a href="#_30-天精通-rxjs-00-：-关于本系列文章" aria-hidden="true" class="header-anchor">#</a> 30 天精通 RxJS (00)： 关于本系列文章</h1><blockquote><p>就如同罗辑思维罗胖老师所说的，在这资讯爆炸的时代，所有的内容生产者要思考一个新维度，那就是我们能帮读者节省多少的时间？这系列文章的核心目标就是帮助读者节省学习 RxJS 的时间，尽可能地以最低的成本精通 RxJS！</p></blockquote><p><img src="https://raw.githubusercontent.com/Reactive-Extensions/RxJS/master/logos/logo.png" alt="RxJS Logo"></p><h2 id="前言"><a href="#前言" aria-hidden="true" class="header-anchor">#</a> 前言</h2><p>笔者从去年就一直想参加铁人赛 30 天，一方面是希望利用机会把自己的所学做一次整理，另一方面想训练自己组织文章的能力。去年的时候我想写 ECMAScript 2015，也准备了一段时间，结果没想到去年停办了一年。</p><p>今年总算让我成功地参加铁人赛 30 天，虽然没有很充裕的准备时间，但我会尽可能地把每个观念、每个细节写清楚，也希望我能坚持到最后！</p><blockquote><p>你问我，我是谁？ 我是一名前端工程师，为了保留一点神秘感就不多做自我介绍了。</p></blockquote><h2 id="为什么写-rxjs-？"><a href="#为什么写-rxjs-？" aria-hidden="true" class="header-anchor">#</a> 为什么写 <a href="https://github.com/ReactiveX/rxjs" target="_blank" rel="noopener noreferrer">RxJS</a> ？</h2><p>其实今年笔者一直在下面这三个主题中犹豫，不知道该选哪一个...</p><ul><li>ECMAScript 2015 (ES6)</li><li>RxJS</li><li>Universal JavaScript</li></ul><p>最一开始是想写 ECMAScript 2015 的，但一年过去了，在网路上相关的中文资源已经非常多，大部分的前端工程师也或多或少有在接触，对我来说我不太喜欢写已经有很多人写过的主题。</p><p>后来是在 Universal JS 跟 RxJS 中犹豫，这两个主题都是目前中文资源较为缺乏的，而且受众也较 ES6 小很多，算是比较大的挑战。后来权衡之下，认为 Universal JS 的牵涉范围太广，不易写深，且对前端工程师来说有著一定的门槛，所以还是选了受众相对较多的 RxJS。</p><p>但 RxJS 仍然是一个不容易撰写的主题，主要原因是整体观念较为抽象不好解释，另外网路上的资源几乎都是英文，且有些资源已经过时，难以判断是否仍然适用。对笔者来说绝对是一个巨大的挑战！</p><p>当然 RxJS 是笔者认为未来两三年内会变得非常红的一套 Library，主要原因有三：</p><ul><li>Reactive Programming 的兴起</li><li>Observable 标准化</li><li>多语言的支持</li></ul><h3 id="reactive-programming（响应式编程）-的兴起"><a href="#reactive-programming（响应式编程）-的兴起" aria-hidden="true" class="header-anchor">#</a> Reactive Programming（响应式编程） 的兴起</h3><p>Reactive Programming 是 RxJS 最重要的核心观念之一，我们会在明天做比较深入的介绍。</p><p>如果有在关注 Vue 的工程师，应该会知道 <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue.js</a> 的底层就是采用了 Reactive Programming 的观念来实例的，另外 Vue 官方也在 11 月推出了 <a href="https://github.com/vuejs/vue-rx" target="_blank" rel="noopener noreferrer">vue-rx</a>。</p><p>另一方面 <a href="https://github.com/angular/angular" target="_blank" rel="noopener noreferrer">Angular 2</a> 也全面引用了 RxJS，不管是在 http 还是 animation 都用了 RxJS 的 Observable！</p><p><a href="https://github.com/reactjs/redux" target="_blank" rel="noopener noreferrer">Redux</a> 也在 <a href="https://github.com/reactjs/redux/releases/tag/v3.5.0" target="_blank" rel="noopener noreferrer">3.5 版</a>中加入了对 Observable 操作的支持。</p><p>从这几个前端的主流 Framework (或 Library) 就能明显地看出这个趋势，大家都在往这个方向走。</p><blockquote><p>笔者也在今年 <a href="https://youtu.be/YoKuUNz5J2M?t=5m2s" target="_blank" rel="noopener noreferrer">JSDC.tw 演讲</a>中提到，目前前端框架同质化的程度越来越高，很多观念会在各个不同的 Library 或 Framework 中通用！</p></blockquote><h3 id="observable-标准化"><a href="#observable-标准化" aria-hidden="true" class="header-anchor">#</a> Observable 标准化</h3><p>还有一个最重要的重点是 Observable 将会被加入 ECMAScript 的标准(应该会在 ES7 推出，我相信 <a href="https://twitter.com/jhusain" target="_blank" rel="noopener noreferrer">Jafar</a> 不会骗我)。
另外 RxJS 现在推出了<a href="https://github.com/ReactiveX/rxjs/releases/tag/5.0.0" target="_blank" rel="noopener noreferrer">第 5 版</a>，这个版本最重要的目标，就是要符合目前 <a href="https://github.com/tc39/proposal-observable" target="_blank" rel="noopener noreferrer">Observable 提案的规格</a>(当然还有效能的优化)。</p><blockquote><p>RxJS 在三天前发布了第五版！</p></blockquote><blockquote><p>ECMAScript 不是一个新的语言，它是 JavaScript 的一份规格书，所有的浏览器厂家会依照这份规格书去实例出 JavaScript。</p></blockquote><blockquote><p>Jafar Husain： TC-39 成员，RxJS 的大力推广者，目前是 Netflix Cross-Team Technical Leader，同时也是 <a href="https://github.com/Netflix/falcor" target="_blank" rel="noopener noreferrer">falcor</a> 的作者之一。</p></blockquote><h3 id="多语言的支持"><a href="#多语言的支持" aria-hidden="true" class="header-anchor">#</a> 多语言的支持</h3><p>其实类似 RxJS 的 Library 还不少，像是 <a href="https://github.com/staltz/xstream" target="_blank" rel="noopener noreferrer">xstream</a>, <a href="https://baconjs.github.io/" target="_blank" rel="noopener noreferrer">Bacon.js</a>, <a href="https://github.com/cujojs/most" target="_blank" rel="noopener noreferrer">most.js</a> 等，那为什么会选 RxJS 呢？</p><p>除了我们前面提到 RxJS 5 的推出，将符合标准规格之外，Rx 还有多个语言支持，几乎所有主流的程式语言都有 Rx 的 Library，像是 <a href="https://github.com/ReactiveX/RxRuby" target="_blank" rel="noopener noreferrer">RxRuby</a>, <a href="https://github.com/ReactiveX/RxPY" target="_blank" rel="noopener noreferrer">RxPy</a>, <a href="https://github.com/ReactiveX/RxJava" target="_blank" rel="noopener noreferrer">RxJava</a>...等，不管以后怎麽切换语言，几乎只要学一次就随处可用。</p><p>从各主流的 Framework 及 Library 纳入 Observable，到将被加入 ES 的标准规格中，还能有跨语言的支持，这就是为什么我认为 RxJS 会红的原因，相信这波浪潮很快就会席卷台湾的前端社群！</p><h2 id="目标"><a href="#目标" aria-hidden="true" class="header-anchor">#</a> 目标</h2><p>希望这 30 天的文章，尽可能的涵盖 RxJS 所有项目，并且以浅显易懂的方式解释及表达给所有读者，让读者能在最短的时间内，以最低的成本学会 RxJS，这就是本系列文章最重要的目标！</p><p>另外本系列文章会以 RxJS 第 5 版为主，所有的示例及 API 都会依照最新的版本撰写。</p><p>为了尽可能的降低读者的学习成本，本系列的每篇文章会尽量压缩在 1500 字以内，让读者每天最多花 20 分钟就能读完，并且会在较难理解的文章附上视频讲解，让读者能更轻鬆的吸收！</p><h2 id="大纲规划"><a href="#大纲规划" aria-hidden="true" class="header-anchor">#</a> 大纲规划</h2><ul><li>核心观念篇 (5天)：介绍 Rx 相关的核心观念，及前置知识等。</li><li>Observable (12～14天)：讲解 Observable 及其方法，并会搭配简单的示例和使用场景。</li><li>Subject (5～6天)：讲解 Subject，包含观念以及各种不同的子类别。</li><li>实际应用 (4～6天)：会选实际上较为複杂的需求，作为一段学习的完整应用练习。</li></ul><p>目前的规划大致如上，也有可能在做改动，如果时间够充裕也可能会再补上 Rx 的 Schedulers。</p><h2 id="问题与讨论"><a href="#问题与讨论" aria-hidden="true" class="header-anchor">#</a> 问题与讨论</h2><p>如果读者对于文章内容有任何疑问或是建议，可以直接在留言区留言给我，我会看每一则留言！</p></div></div></div><div class="v-card__actions"><div class="flex xs12"><a href="/BLOG/tags/RXJS"><span tabindex="0" class="v-chip capitalize chip-tag v-chip--label v-chip--small"><span class="v-chip__content">RXJS</span></span></a></div></div></article></div><div class="flex text-xs-left xs6"><a href="/BLOG/posts/rxjs01.html" class="post-nav v-btn v-btn--flat v-btn--router"><div class="v-btn__content"><div class="grey--text"><i class="fa mr-1 fa-chevron-left"></i>Prev</div><div class="title mt-1 primary--text hidden-xs-only">01认识 RxJS</div></div></a></div><div class="flex text-xs-right xs6"><a href="/BLOG/posts/vue-best-practices.html" class="post-nav v-btn v-btn--flat v-btn--router"><div class="v-btn__content"><div class="grey--text">Next
          <i class="fa ml-1 fa-chevron-right"></i></div><div class="title mt-1 primary--text hidden-xs-only">Vue最佳实践</div></div></a></div><div class="flex mt-3 xs12"><div class="v-card" style="height:undefined;"><div class="v-card__title"><span class="headline">Comment</span></div></div></div></div></div><footer class="v-footer blog-footer darken-1 mt-3 theme--dark" style="height:auto;"><div class="primary--text text--lighten-4 text-xs-center py-3 v-card v-card--flat v-card--tile primary" style="height:undefined;"><div class="v-card__text pb-0">博客内容遵循 <a rel="license noopener noreferrer" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a></div><div class="v-card__text pt-0 mt-1"><span>訾绍飞 © 2015 - 2018</span><span><!---->
        Power by
        <a href="https://vuepress.vuejs.org" target="_blank" rel="noopener noreferrer">VuePress</a> Theme
        <a href="https://github.com/ShaofeiZi/BLOG" target="_blank" rel="noopener noreferrer">indigo</a></span></div></div></footer></div></main><button type="button" class="v-btn v-btn--bottom v-btn--floating v-btn--fixed v-btn--right accent" style="display:none;"><div class="v-btn__content"><i class="fa fa-lg fa-chevron-up"></i></div></button></div></div></div>
    <script src="/BLOG/assets/js/34.9b22334e.js" defer></script><script src="/BLOG/assets/js/app.1a725be8.js" defer></script>
  </body>
</html>
